<template>
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="4">
                    <img
                        class="navimg"
                        src="https://www.yinyuetai.com/_nuxt/img/efb92bc.png"
                        alt=""
                    />
                </el-col>
                <el-col :span="16">
                    <router-link to="/">
                        <el-button
                            type="success"
                            size="medium"
                            round
                            plain
                            autofocus
                            >内地</el-button
                        >
                    </router-link>
                    <router-link to="/hang">
                        <el-button type="success" size="medium" round plain
                            >香港</el-button
                        >
                    </router-link>
                    <router-link to="/taiwan">
                        <el-button type="success" size="medium" round plain
                            >台湾</el-button
                        >
                    </router-link>
                    <router-link to="/fremdness">
                        <el-button type="success" size="medium" round plain
                            >日韩欧美</el-button
                        >
                    </router-link>
                    <router-link to="musiclist">
                        <el-button type="success" size="medium" round plain
                            >音悦V榜及自制</el-button
                        >
                    </router-link>
                </el-col>
                <el-col :span="4">
                    <el-link @click="open2" type="warning">登录</el-link>
                    <el-link @click="open1" type="danger">注册</el-link>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        open2() {
            this.$notify({
                title: "刘闯YYDs",
                message: "俺写的真好看",
                type: "success",
            });
        },
        open1() {
            const h = this.$createElement;

            this.$notify({
                title: "黄永康come on",
                message: h(
                    "i",
                    { style: "color: teal" },
                    "俺累了不想写了俺累了不想写了俺累了不想写了俺累了不想写了俺累了不想写了俺累了不想写了俺累了不想写了"
                ),
            });
        },
    },
};
</script>

<style lang="scss">
body {
    margin: 0;
    padding: 0;
    background-color: #e9eef3;
}
.el-header {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 20px;
    background-color: #ffffff;
}

body > .el-container {
    margin-bottom: 40px;
}
.el-row {
    height: 60px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    height: 60px;
}
.navimg {
    height: 100%;
}
.el-link {
    margin-right: 10px;
}
.el-col a {
    // font-size: 18px;
    margin-left: 10px;
    margin-right: 10px;
}
</style>